<template>
	<view class="app-container">
		<!-- 密码登录 -->

		<view class="top">
			<image src="/src/static/icon/logo.png" mode="widthFix" class="logo"></image>
			<view class="title">
				欢迎来到银迅伙伴
			</view>
		</view>

		<!-- <view class="registerBox">
			<span @click="goRegister()">用户注册</span>
		</view> -->
		<view class="app-container__item">
			<view class="loginList">
				<view class="loginItem" v-for="(item,index) in loginList" :key="item.value"
					@click="selectLogin(item.value)">
					<view :class="item.value === currentType ? 'itemLabelSelect' : 'itemLabel'
            ">{{ item.label }}</view>
					<view class="line" v-if="index==0">

					</view>
					<!-- 	<view class="itemValue" v-show="item.value === currentType"></view> -->
				</view>

			</view>
			<view class="content" v-if="currentType == 0">
				<view class="input-border">
					<view class="label">账号</view>
					<view class="line">

					</view>
					<input v-model="formData.phone" type="number" maxlength="11" placeholder="请输入手机号"
						class="input width-75" @input="(e) => inputChange(e, 'phone')" />
				</view>
				<view class="input-border">
					<view class="label">密码</view>
					<view class="line">

					</view>
					<input v-model="password" type="password" placeholder="请输入密码" class="input width-75"
						@input="(e) => inputChange(e, 'password')" />
				</view>
				<view class="forgetPassword">
					<checkbox-group class="checkRadio" @change="passCheckChange">
						<label>
							<checkbox value="checkValue" style="transform: scale(0.6)" />记住登录
						</label>
					</checkbox-group>
					<view @click="editPassword()">忘记密码?</view>
				</view>
			</view>
			<!--验证码登录-->
			<view class="content" v-else>
				<view class="input-border">
					<view class="label">手机号</view>
					<view class="line">

					</view>
					<input v-model="formData.phone" type="number" maxlength="11" placeholder="请输入手机号"
						class="input width-75" @input="(e) => inputChange(e, 'phone')" />
				</view>
				<view class="input-border">
					<view class="label">验证码</view>
					<view class="line">

					</view>
					<view class="sms width-75">
						<input v-model="formData.code" type="number" class="input " placeholder="请填写验证码" :maxlength="6"
							@input="(e) => inputChange(e, 'code')" />
						<!-- <text class="getCode" slot="right" @click="sendCode('LOGIN', formData.phone)">{{ buttonText }}</text> -->
						<button @click="sendCode('PHONE_SMS_CODE_LOGIN', formData.phone)" :disabled="isSend" size="mini"
							class="getCode">
							{{ buttonText }}
						</button>
					</view>

				</view>
			</view>
			<view>
				<button class="btnBox" @click="loginBtn()">登录</button>
			</view>
			<view>
				<button class="regis-btn " @click="goRegister()">注册</button>
			</view>
			<view class="text-gray bottom">
				<checkbox-group class="checkRadio" @change="checkboxLoginChange">
					<label>
						<checkbox value="checkValue" style="transform: scale(0.6)" />登录即代表同意 <text
							class="blue">《服务使用政策》</text>和 <text class="blue"> 《隐私政策》</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from "vue";
	import {
		showToast
	} from "@/utils/toast";
	import useVerifyCode from "@/hook/useVerifyCode";
	import {
		removeBlankReg
	} from "@/utils/regExp";
	import {
		useStore
	} from "@/store/index";
	import {
		RSAencrypt
	} from "@/utils/methods";
	onLoad(() => {
		init();
	});
	onShow(() => {});
	// store实例
	const store = useStore();
	let selectLogin = (val) => {
		console.log("val", val);
		currentType.value = val;
	};
	// 注册发送验证码hook
	const [{
		buttonText,
		isSend
	}, {
		sendCode
	}] = useVerifyCode("发送验证码");
	// 登录方式切换
	let loginList = ref([{
			label: "账号登录",
			value: 0,
		},
		{
			label: "验证码登录",
			value: 1,
		},
	]);
	let password = ref(null);
	let currentType = ref(0);
	let checkValue = ref(false);
	let loginCheckValue = ref(false);
	// 登录数据
	let formData = reactive({
		password: null,
		phone: null,
		code: null,
		terminal: 'MERCHANT',
		loginType: null,
		oemUserNo: 'BU100002'
	});
	let goRegister = () => {
		uni.navigateTo({
			url: "/pagesLogin/register/index",
		});
	};
	let editPassword = () => {
		uni.navigateTo({
			url: `/pagesLogin/editPassword/index?status=retrieve`,
		});
	};
	let loginBtn = () => {
		if (checkData()) {
			handleFormData();

			useStore()
				.login(formData)
				.catch((error) => {
					console.log("error", error)
					showToast(error.data.message || error.data.error, "none");
				});
			// uni.switchTab({
			//   url: "/pages/index/index",
			// });
		}
	};
	// 处理要提交的表单数据
	let handleFormData = () => {
		if (currentType.value == 0) {
			// 密码登录
			if (checkValue.value) {
				//保存账密
				console.log("phone=" + formData.phone)
				uni.setStorageSync('phone', formData.phone);
				uni.setStorageSync('pass', password.value);
				const savedUsername = uni.getStorageSync('phone');
				const savedPassword = uni.getStorageSync('pass');
				console.log("save savedUsername" + savedUsername + "pass=" + savedPassword)
			}
			formData.code = "";
			formData.loginType = 'PASSWORD'
			formData.password = RSAencrypt(password.value)

		} else if (currentType.value == 1) {
			// 验证码登录
			formData.password = "";
			password = "";
			formData.loginType = 'CODE'
		}
	}
	// 登录信息验证
	let checkData = () => {
		console.log("formData888", currentType.value);
		if (!formData.phone) {
			showToast("请输入手机号", "none");
			return;
		}
		if (!password && currentType.value == 0) {
			showToast("请输入密码", "none");
			return;
		}
		if (!formData.code && currentType.value == 1) {
			showToast("请输入验证码", "none");
			return;
		}
		if (!loginCheckValue.value) {
			showToast("请勾选同意用户协议", "none");
			return;
		}
		return true;
	};
	let checkboxChange = (val) => {
		console.log("val", val);
		if (val.detail.value.length) {
			checkValue.value = true;
		} else {
			checkValue.value = false;
		}
	};
	let checkboxLoginChange = (val) => {
		console.log("val", val);
		if (val.detail.value.length) {
			loginCheckValue.value = true;
		} else {
			loginCheckValue.value = false;
		}
	};
	let passCheckChange = (val) => {
		console.log("val", val);
		if (val.detail.value.length) {
			checkValue.value = true;
		} else {
			checkValue.value = false;
		}
	};
	// 密码框禁止输入空格等符号
	function inputChange(e, key) {
		setTimeout(() => {
			formData[key] = removeBlankReg(e.detail.value);
		}, 0);
	}
	// 初始化
	function init() {
		const savedUsername = uni.getStorageSync('phone');
		const savedPassword = uni.getStorageSync('pass');
		console.log("savedUsername" + savedPassword + "pass=" + savedPassword)
		if (currentType.value == 0 && savedUsername && savedPassword) {
			loginCheckValue.value = true;
			formData.phone = savedUsername;
			password.value = savedPassword;
			loginBtn();
		}

	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>